<template>
  <div id="mainWastePie"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "../../../../mixin/resize.js";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let num = 10;
let props = defineProps(["pieData"]);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("mainWastePie"));
  resize(myChart.value);
  // resize(myChart.value)
  getServerData();
});
let option = {
  color: ["#B2C4D7", "#36AEFF", "#30D4E6", "#4EE8DF", "#8CEFDE"],
  title: {
    text: "",
    textStyle: {
      fontSize: 14,
    },
    top: "0", // 设置标题位于图表的顶部
  },
  tooltip: {
    trigger: "item",
    formatter: function (params) {
     
      return (
        ` ${params.data.name} ` +
        "<br>" +
        "危废产生量: " +
        params.data.num +
        "吨"
      );
    },
  },
  label: {
    show: true,
    position: "outside",
    // formatter: '{b}: {c}', // 标签内容，{b} 表示数据项名称，{c} 表示数据项值
    // formatter: function (param) {
    //    // console.log(param)
    //    let style = ''
    //    switch (param.name) {
    //    }
    //    return (
    //       param.name + '\n\n' + '{' + style + param.value + 'unit' + ' | ' + param.percent + '%}'
    //    )
    // },
    lineStyle: {
      length: 10, // 连线长度
    },
  },
  series: [
    {
      // name: "主要商品月度货值趋势",
      type: "pie",
      radius: [15, 100],
      center: ["50%", "44%"],
      roseType: "area",
      label: {
        show: true,
        formatter: "{b}\n{c}%",
        color: "#A3BAD0",
        fontSize: 15,
      },
      data: [],
    },
  ],
  /*
 graphic: [
   {
     type: 'text',
     left: '50%', // 与 center 的横坐标对应
     top: '50%', // 与 center 的纵坐标对应
     /!* left: 'center',
       top: 'center', *!/
     style: {
       text: props.curYear,
       fontSize: 16,
       fontWeight: 'bold',
     },
     z: 10, // 设置 z 值，确保在饼图之上
   },
 ],
*/
};

let getServerData = () => {
  myChart.value.setOption(option);
};
watch(
  () => props.pieData,
  () => {
    // console.log("pieData change", props.pieData);

    option.series[0].data = props.pieData.map((item) => {
      return {
        value: item.percent,
        name: item.enterpriseName,
        num: item.wasteNum,
      };
    });
    // console.log(props.pieData, "option");
    getServerData();
  },
  { deep: true }
);
</script>
<style lang="scss" scoped>
#mainWastePie {
  width: 100%;
  margin-top: 2vh;
  height: calc(36vh - 30px);
}
</style>
